<template>
    <div class="musicList">
        <div class="musicTop">
            <div class="title">
                发现好歌单
            </div>
            <div class="more">
                发现更多
            </div>
        </div>
        <div class="musicContent">
            <van-swipe :loop="false" :width="150" class="my-swipe" :show-indicators="false">
                <van-swipe-item v-for="item in state.musicList" :key="item" class="every-swipe">
                    <router-link :to="{path:'/itemmusic',query:{id:item.id}}">
                        <img :src="item.picUrl" alt="">
                        <span class="playCount">
                            <svg class="icon" aria-hidden="true" style="width: 0.3rem;height: 0.3rem;">
                                <use xlink:href="#icon-24gl-play"></use>
                            </svg>
                            {{changeCount(item.playCount) }}
                        </span>
                        <span class="name">{{item.name}}</span>
                    </router-link>
                </van-swipe-item>

            </van-swipe>

        </div>
    </div>
</template>

<script>
import { getMusicList } from '@/request/api/home';

import { reactive, onMounted } from 'vue'

export default {
    // data() {
    //     return {
    //         musicList: []
    //     }
    // },
    // methods: {
    //     async getGedan() {
    //         let res = await getMusicList()
    //         console.log(res)
    //         this.musicList = res.data.result
    //     },
    //     changeCount: function (num) {
    //         if (num >= 100000000) {
    //             return (num / 100000000).toFixed(1) + '亿'
    //         } else if (num >= 10000) {
    //             return (num / 10000).toFixed(1) + '万'

    //         }
    //     }
    // },
    // mounted() {
    //     this.getGedan()
    // }

    setup() {
        const state = reactive({
            musicList: []
        })
        function changeCount(num) {
            if (num >= 100000000) {
                return (num / 100000000).toFixed(1) + '亿'
            } else if (num >= 10000) {
                return (num / 10000).toFixed(1) + '万'

            }
        }
        onMounted(async () => {
            let res = await getMusicList()
            console.log(res)
            state.musicList = res.data.result
        })
        return {
            state,
            changeCount
        }
    }
}

</script>

<style lang="less" scoped>
.musicList {
    width: 100%;
    height: 5rem;
    padding: 0.2rem;

    .musicTop {
        width: 100%;
        height: 0.6rem;
        display: flex;
        justify-content: space-between;
        margin-bottom: .2rem;

        .title {
            font-size: 0.4rem;
            font-weight: 900;
        }

        .more {
            border: 1px solid #ccc;
            text-align: center;
            line-height: 0.6rem;
            padding: 0 0.2rem;
            border-radius: 0.4rem;
        }
    }

    .musicContent {
        width: 100%;
        height: 4rem;

        .my-swipe {
            height: 100%;

            .every-swipe {
                padding: 0 15px 0 0;
                position: relative;

                img {
                    width: 2.6rem;
                    height: 2.6rem;
                    border-radius: 10px;
                }

                .playCount {
                    // width: 1.3rem;
                    // height: 0.6rem;
                    position: absolute;
                    top: .1rem;
                    right: .5rem;
                    font-size: small;
                    color: white;


                }

                .name {
                    font-size: small;
                }
            }


        }
    }
}
</style>